<template>
  <div class="profile_set_personal">
    <scroll class="content">
      <el-form :model="personalForm"
               ref="personalForm"
               class="personalForm"
               label-width="80px">
        <!--教育信息-->
        <profile-title title="教育信息"></profile-title>
        <div class="education_message">
          <el-form-item label="学历" prop="qualification">
            <el-select v-model="personalForm.educationInfo.qualification"
                       placeholder="请选择学历"
                       :disabled="isEdit">
              <el-option v-for="item in qualificationList"
                         :label="item"
                         :value="item"
                         :key="item"></el-option>
            </el-select>
          </el-form-item>
          <div class="title">教育经历:</div>
          <div class="education"
               v-for="index in personalForm.educationInfo.experience.length"
               :key="index">
            <el-form-item label="学校" prop="school">
              <el-input v-model="personalForm.educationInfo.experience[index-1].school"
                        placeholder="请输入学校名称"
                        :disabled="isEdit"></el-input>
            </el-form-item>
            <el-form-item label="时间" prop="during">
              <el-date-picker
                v-model="personalForm.educationInfo.experience[index-1].during"
                type="daterange"
                range-separator="至"
                start-placeholder="开始"
                end-placeholder="结束"
                :disabled="isEdit" class="uuu">
              </el-date-picker>
            </el-form-item>

            <span class="el-icon-delete"
                  title="删除此项教育经历"
                  @click="delEducation(index)"
                  v-show="!isEdit && index > 1"></span>
          </div>
          <div class="add_education">
            <el-button @click="addEducation" :disabled="isEdit">增加教育经历</el-button>
          </div>
        </div>
        <!--工作信息-->
        <profile-title title="工作信息"></profile-title>
        <div class="job_message">
          <div class="title">工作经历:</div>
          <div class="job" v-for="index in personalForm.workInfo.length" :key="index">
            <el-form-item label="在职时长" prop="workYear">
              <el-select v-model="personalForm.workInfo[index-1].workYear"
                         placeholder="请选择工作年限"
                         :disabled="isEdit">
                <el-option :label="item"
                           :value="item"
                           v-for="item in workYearList"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="公司名称"
                          prop="firm"
                          v-if="hasExperience(index)">
              <el-input v-model="personalForm.workInfo[index-1].firm"
                        placeholder="请输入公司名称"
                        :disabled="isEdit"></el-input>
            </el-form-item>
            <el-form-item label="职位名称"
                          prop="position"
                          v-if="hasExperience(index)">
              <el-input v-model="personalForm.workInfo[index-1].position"
                        placeholder="请输入职位名称"
                        :disabled="isEdit"></el-input>
            </el-form-item>
            <span class="el-icon-delete"
                  title="删除此项工作经历"
                  @click="delExperience(index)"
                  v-show="!isEdit && index > 1"></span>
          </div>
          <div class="add_experience">
            <el-button @click="addExperience" :disabled="canAddExperience || isEdit" >增加工作经历</el-button>
          </div>
        </div>

        <div class="operation">
          <el-form-item>
            <el-button type="primary" @click="submitForm('personalForm')">保存</el-button>
          </el-form-item>
          <el-form-item>
            <el-button @click="editForm">编辑</el-button>
          </el-form-item>
        </div>
      </el-form>
    </scroll>
  </div>
</template>

<script>
  import Scroll from "components/content/scroll/Scroll";
  import ProfileTitle from "../ProfileTitle";

  import {updateMessage, getUserInfo} from "network/profile";

  export default {
    name: "ProfileSetPersonal",
    components: {
      Scroll,
      ProfileTitle,
    },
    data() {
      return {
        workYearList: ["无", "三个月", "半年", "一年", "两年", "五年", "十年", "十年以上"],
        qualificationList: ["小学", "初中", "中专", "高中", "专科", "本科", "硕士研究生", "博士研究生"],
        isEdit: true,

        personalForm: {
          educationInfo: {
            qualification: '',
            experience: [
              {
                school: '',
                during: '',
              }
            ],
          },
          workInfo: [
            {
              workYear: '',
              firm: '',
              position: '',
            }
          ],
        },
      }
    },
    created() {
      const obj = {
        userId: this.$store.state.userInfo.id
      }
      getUserInfo(obj).then(res => {
        this.personalForm.workInfo = res.data.data.workInfo
        this.personalForm.educationInfo = res.data.data.educationInfo
      })
    },
    computed: {
      canAddExperience() {
        for(let item of this.personalForm.workInfo) {
          if(item.workYear === "无") {
            return true
          }
        }
      },
    },
    methods: {
      // 监听事件
      addEducation() {
        const obj = {
          school: '',
          during: '',
        }
        this.personalForm.educationInfo.experience.push(obj)
      },
      delEducation(index) {
        this.$confirm('删除此项教育经历，是否确定', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.personalForm.educationInfo.experience.splice(index - 1, 1)
          this.$toast.show('删除成功', 'success', 1000)
        }).catch(() => {
          this.$toast.show('取消删除', 'default', 1000)
        });
      },
      addExperience() {
        const obj = {
          workYear: '',
          firm: '',
          position: '',
        }
        this.personalForm.workInfo.push(obj)
      },
      delExperience(index) {
        this.$confirm('删除此项工作经历，是否确定', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.personalForm.workInfo.splice(index - 1, 1)
          this.$toast.show('删除成功', 'success', 1000)
        }).catch(() => {
          this.$toast.show('取消删除', 'default', 1000)
        });
      },
      hasExperience(index) {
        return this.personalForm.workInfo[index-1].workYear === "无" || this.personalForm.workInfo[index-1].workYear === "" ? false : true
      },
      editForm() {
        this.isEdit = !this.isEdit
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            updateMessage(this.$store.state.userInfo.id, this.personalForm).then(res => {
              console.log(res)
              if(res.data.code) {
                this.$toast.show('成功保存个人信息', 'success', 1000)
                this.isEdit = true
              }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
    }
  }
</script>

<style scoped>
  .content {
    width: 790px;
    height: calc(100vh - 64px);
    background-color: #fff;
  }

  .personalForm >>> .el-form-item {
    width: 250px;
  }

  .education_message .title {
    padding: 10px 0 30px 40px;
    font-weight: 700;
    font-size: 14px;
  }

  .education_message {
    margin: 30px 10px;
  }

  .personalForm >>> .el-date-range-picker {
    width: 600px!important;
  }

  .personalForm >>> .el-date-editor--daterange.el-input, .el-date-editor--daterange.el-input__inner, .el-date-editor--timerange.el-input, .el-date-editor--timerange.el-input__inner {
    width: 250px;
  }

  .education {
    overflow: hidden;
  }

  .education .el-form-item {
    float: left;
  }

  .education .el-icon-delete {
    float: right;
    margin: 12px 150px 0 0;
    font-size: 16px;
    color: #8F9395;
  }

  .education .el-icon-delete:hover {
    cursor: pointer;
    color: #002766;
  }

  .add_education {
    margin: 5px 0 0 45px;
  }

  .job_message {
    margin: 30px 10px;
    padding-left: 30px;
  }

  .job_message .title {
    padding: 10px 0 30px 10px;
    font-weight: 700;
    font-size: 14px;
  }

  .job {
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
  }

  .job .el-form-item:nth-child(2),
  .job .el-form-item:nth-child(3) {
    float: left;
    margin-right: 30px;
  }

  .job .el-icon-delete {
    position: absolute;
    top: 12px;
    left: 270px;
    font-size: 16px;
    color: #8F9395;
  }

  .job .el-icon-delete:hover {
    cursor: pointer;
    color: #002766;
  }

  .add_experience {
    margin: -15px 0 0 15px;
  }

  .operation {
    width: 400px;
    margin: 0 auto 20px;
    overflow: hidden;
  }

  .operation .el-form-item {
    float: left;
    width: 100px;
  }

  .el-button--primary {
    background-color: #4361a7;
    border-color: #4361a7;
    color: #fff;
  }

  .el-button--primary:hover {
    background-color: #5177ce;
    border-color: #5177ce;
    color: #fff;
  }

  .el-button--primary {
    margin-right: 20px;
  }


</style>
